/*animations 自定义动画*/
/* how to use
	-webkit-animation: flash 1s ease both
  -moz-animation: flash 1s ease both
*/

/*左右摆动*/
@-webkit-keyframes swing {
	20% {
		-webkit-transform: rotate(12deg);
		transform: rotate(12deg)
	}
	40% {
		-webkit-transform: rotate(-8deg);
		transform: rotate(-8deg)
	}
	60% {
		-webkit-transform: rotate(4deg);
		transform: rotate(4deg)
	}
	80% {
		-webkit-transform: rotate(-4deg);
		transform: rotate(-4deg)
	}
	to {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

@keyframes swing {
	20% {
		-webkit-transform: rotate(12deg);
		transform: rotate(12deg)
	}
	40% {
		-webkit-transform: rotate(-8deg);
		transform: rotate(-8deg)
	}
	60% {
		-webkit-transform: rotate(4deg);
		transform: rotate(4deg)
	}
	80% {
		-webkit-transform: rotate(-4deg);
		transform: rotate(-4deg)
	}
	to {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
}

/*前后翻转*/
@-webkit-keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(0);
		transform: perspective(400px) rotateX(0);
		opacity: 1;
	}
	20% {
		-webkit-transform: perspective(400px) rotateX(30deg);
		transform: perspective(400px) rotateX(30deg);
		opacity: .2;
	}
	0%, 40% {
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	40% {
		-webkit-transform: perspective(400px) rotateX(-20deg);
		transform: perspective(400px) rotateX(-20deg);
	}
	60% {
		-webkit-transform: perspective(400px) rotateX(10deg);
		transform: perspective(400px) rotateX(10deg);
		opacity: 1
	}
	80% {
		-webkit-transform: perspective(400px) rotateX(-5deg);
		transform: perspective(400px) rotateX(-5deg);
	}
	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}

@keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(0);
		transform: perspective(400px) rotateX(0);
		opacity: 1;
	}
	20% {
		-webkit-transform: perspective(400px) rotateX(30deg);
		transform: perspective(400px) rotateX(30deg);
		opacity: .2;
	}
	0%, 40% {
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	40% {
		-webkit-transform: perspective(400px) rotateX(-20deg);
		transform: perspective(400px) rotateX(-20deg);
	}
	60% {
		-webkit-transform: perspective(400px) rotateX(10deg);
		transform: perspective(400px) rotateX(10deg);
		opacity: 1
	}
	80% {
		-webkit-transform: perspective(400px) rotateX(-5deg);
		transform: perspective(400px) rotateX(-5deg);
	}
	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}

/*闪烁*/
@-webkit-keyframes flash {
	0%, 50%, to {
		opacity: 1
	}
	25%, 75% {
		opacity: 0
	}
}

@keyframes flash {
	0%, 50%, to {
		opacity: 1
	}
	25%, 75% {
		opacity: 0
	}
}

/*放大缩小*/
@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05)
	}
	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

@keyframes pulse {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05)
	}
	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

/*弹力带*/
@-webkit-keyframes rubberBand {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
	30% {
		-webkit-transform: scale3d(1.25, .75, 1);
		transform: scale3d(1.25, .75, 1)
	}
	40% {
		-webkit-transform: scale3d(.75, 1.25, 1);
		transform: scale3d(.75, 1.25, 1)
	}
	50% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}
	65% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}
	75% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}
	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

@keyframes rubberBand {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
	30% {
		-webkit-transform: scale3d(1.25, .75, 1);
		transform: scale3d(1.25, .75, 1)
	}
	40% {
		-webkit-transform: scale3d(.75, 1.25, 1);
		transform: scale3d(.75, 1.25, 1)
	}
	50% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}
	65% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}
	75% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}
	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

/*右上角弹力*/
@-webkit-keyframes wobble-to-top-right {
	16.65% {
		-webkit-transform: translate(8px, -8px);
		transform: translate(8px, -8px);
	}

	33.3% {
		-webkit-transform: translate(-6px, 6px);
		transform: translate(-6px, 6px);
	}

	49.95% {
		-webkit-transform: translate(4px, -4px);
		transform: translate(4px, -4px);
	}

	66.6% {
		-webkit-transform: translate(-2px, 2px);
		transform: translate(-2px, 2px);
	}

	83.25% {
		-webkit-transform: translate(1px, -1px);
		transform: translate(1px, -1px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@keyframes wobble-to-top-right {
	16.65% {
		-webkit-transform: translate(8px, -8px);
		transform: translate(8px, -8px);
	}

	33.3% {
		-webkit-transform: translate(-6px, 6px);
		transform: translate(-6px, 6px);
	}

	49.95% {
		-webkit-transform: translate(4px, -4px);
		transform: translate(4px, -4px);
	}

	66.6% {
		-webkit-transform: translate(-2px, 2px);
		transform: translate(-2px, 2px);
	}

	83.25% {
		-webkit-transform: translate(1px, -1px);
		transform: translate(1px, -1px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

/*右下角弹力*/
@-webkit-keyframes wobble-to-bottom-right {
	16.65% {
		-webkit-transform: translate(8px, 8px);
		transform: translate(8px, 8px);
	}

	33.3% {
		-webkit-transform: translate(-6px, -6px);
		transform: translate(-6px, -6px);
	}

	49.95% {
		-webkit-transform: translate(4px, 4px);
		transform: translate(4px, 4px);
	}

	66.6% {
		-webkit-transform: translate(-2px, -2px);
		transform: translate(-2px, -2px);
	}

	83.25% {
		-webkit-transform: translate(1px, 1px);
		transform: translate(1px, 1px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@keyframes wobble-to-bottom-right {
	16.65% {
		-webkit-transform: translate(8px, 8px);
		transform: translate(8px, 8px);
	}

	33.3% {
		-webkit-transform: translate(-6px, -6px);
		transform: translate(-6px, -6px);
	}

	49.95% {
		-webkit-transform: translate(4px, 4px);
		transform: translate(4px, 4px);
	}

	66.6% {
		-webkit-transform: translate(-2px, -2px);
		transform: translate(-2px, -2px);
	}

	83.25% {
		-webkit-transform: translate(1px, 1px);
		transform: translate(1px, 1px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

/*顶部摆动*/
@-webkit-keyframes wobble-top {
	16.65% {
		-webkit-transform: skew(-12deg);
		transform: skew(-12deg);
	}

	33.3% {
		-webkit-transform: skew(10deg);
		transform: skew(10deg);
	}

	49.95% {
		-webkit-transform: skew(-6deg);
		transform: skew(-6deg);
	}

	66.6% {
		-webkit-transform: skew(4deg);
		transform: skew(4deg);
	}

	83.25% {
		-webkit-transform: skew(-2deg);
		transform: skew(-2deg);
	}

	100% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
}

@keyframes wobble-top {
	16.65% {
		-webkit-transform: skew(-12deg);
		transform: skew(-12deg);
	}

	33.3% {
		-webkit-transform: skew(10deg);
		transform: skew(10deg);
	}

	49.95% {
		-webkit-transform: skew(-6deg);
		transform: skew(-6deg);
	}

	66.6% {
		-webkit-transform: skew(4deg);
		transform: skew(4deg);
	}

	83.25% {
		-webkit-transform: skew(-2deg);
		transform: skew(-2deg);
	}

	100% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
}

/*底部摆动*/
@-webkit-keyframes wobble-bottom {
	16.65% {
		-webkit-transform: skew(-12deg);
		transform: skew(-12deg);
	}

	33.3% {
		-webkit-transform: skew(10deg);
		transform: skew(10deg);
	}

	49.95% {
		-webkit-transform: skew(-6deg);
		transform: skew(-6deg);
	}

	66.6% {
		-webkit-transform: skew(4deg);
		transform: skew(4deg);
	}

	83.25% {
		-webkit-transform: skew(-2deg);
		transform: skew(-2deg);
	}

	100% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
}

@keyframes wobble-bottom {
	16.65% {
		-webkit-transform: skew(-12deg);
		transform: skew(-12deg);
	}

	33.3% {
		-webkit-transform: skew(10deg);
		transform: skew(10deg);
	}

	49.95% {
		-webkit-transform: skew(-6deg);
		transform: skew(-6deg);
	}

	66.6% {
		-webkit-transform: skew(4deg);
		transform: skew(4deg);
	}

	83.25% {
		-webkit-transform: skew(-2deg);
		transform: skew(-2deg);
	}

	100% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
}

.move-down-enter-active, .move-down-leave-active {
	transition: .5s
}

.move-down-enter, .move-down-leave-to {
	transform: translateY(-100%);
}